<template>
  <div class="container">
    <el-row type="flex" align="middle" justify="space-between">
      <!--移动端-->
      <el-col :span="8" class="hidden-md-and-up hidden-lg-and-up" style="line-height: 60px">
        <el-button type="primary" icon="el-icon-s-unfold" plain size="mini" @click="drawer = true"></el-button>
      </el-col>
      <el-col :span="8" class="hidden-md-and-up hidden-lg-and-up text-center" style="line-height: 60px">
        {{ nav_config.name }}
      </el-col>
      <el-col :span="8" class="hidden-md-and-up hidden-lg-and-up" style="line-height: 60px;">
        <template v-if="isLogin">
          <el-row type="flex" align="middle" justify="end">
            <div @click="goLink('/user/' + userInfo.userId)">
              <el-avatar style="position: relative;top: 7px;"
                         icon="el-icon-user-solid"
                         :size="30"
                         :src="(userInfo.avatar == null) ? '': imgPrefix + userInfo.avatar"></el-avatar>
            </div>
          </el-row>
        </template>
        <template v-else>
          <el-button type="primary" plain size="mini" style="float: right" @click="goLink('/login')">登录</el-button>
        </template>
      </el-col>
      <!--PC端-->
      <el-col class="hidden-xs-only hidden-sm-only" :span="3" style="line-height:60px;">
        {{ nav_config.name }}
      </el-col>
      <el-col class="hidden-xs-only hidden-sm-only" :span="15" v-if="menuList.length > 0">
        <el-menu :default-active="activeIndex" mode="horizontal" active-text-color="#409EFF">
          <template v-for="(item,index) in menuList">
            <el-menu-item v-if="!item.list" :index="index + ''" @click="goLink(item.menuUrl)">{{ item.menuName }}</el-menu-item>
            <el-submenu v-else :index="index + ''">
              <template slot="title">{{ item.name }}</template>
              <el-menu-item :index="index + '-' + i" @click="goLink(j.menuUrl)" v-for="(j,i) in item.list" :key="i">{{ j.menuName }}</el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
      </el-col>
      <el-col class="hidden-xs-only hidden-sm-only" :span="6">
        <template v-if="isLogin">
          <el-dropdown class="pointer" style="float: right;">
            <span class="el-dropdown-link">
              <a :href="userUrl">
                <el-row class="fs-14" type="flex" align="middle" justify="end">
                  <div>
                    {{ (userInfo.nickName === null || userInfo.nickName === '') ? userInfo.userName : userInfo.nickName }}&nbsp;
                  </div>
                  <div>
                    <el-avatar icon="el-icon-user-solid" :size="30" :src="(userInfo.avatar == null) ? '': imgPrefix + userInfo.avatar"></el-avatar>
                  </div>
                </el-row>
              </a>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div @click="logout">退出登录</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
        <el-row v-else class="fs-14" type="flex" align="middle" justify="end">
          <div>
            <nuxt-link to="/login">登录</nuxt-link>
          </div>
        </el-row>
      </el-col>
    </el-row>
    <!--移动端抽屉导航-->
    <el-drawer
      :title="nav_config.name"
      :visible.sync="drawer"
      size="60%"
      direction="ltr"
      @open="drawerOpen"
      @close="drawerClose">
      <el-menu :default-active="activeIndex" active-text-color="#409EFF">
        <template v-for="(item,index) in menuList">
          <el-menu-item v-if="!item.list" :index="index + ''" @click="goLink(item.menuUrl)">{{ item.menuName }}</el-menu-item>
          <el-submenu v-else :index="index + ''">
            <template slot="title">{{ item.name }}</template>
            <el-menu-item :index="index + '-' + i" @click="goLink(j.menuUrl)" v-for="(j,i) in item.list" :key="i">{{ j.menuName }}</el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
      <el-row class="text-center mg-t-20" type="flex" justify="space-between" align="middle" style="flex-wrap: wrap;">
        <el-col v-if="isLogin">
          <nuxt-link :to="'/user/' + userInfo.userId">
            <el-row type="flex" align="middle" justify="center">
              <div>
                <el-avatar icon="el-icon-user-solid" :size="30" :src="(userInfo.avatar == null) ? '': imgPrefix + userInfo.avatar"></el-avatar>&nbsp;
              </div>
              <div>
                {{ (userInfo.nickName === null || userInfo.nickName === '') ? userInfo.userName : userInfo.nickName }}
              </div>
            </el-row>
          </nuxt-link>
        </el-col>
        <el-col v-else>
          <nuxt-link to="/login">
            <el-button class="sm-width-96" type="primary" round>登录</el-button>
          </nuxt-link>
        </el-col>
        <el-col v-if="isLogin" class="mg-t-10">
          <el-button type="primary" round @click="logout" size="mini">退出登录</el-button>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      isLogin: state => state.user.isLogin,
      classifyList: state => state.classifyList,
      nav_config: state => state.config,
      menuList: state => state.menuList
    })
  },
  data(){
    return{
      //图片链接前缀
      imgPrefix: process.env.NUXT_APP_BASE_API,
      //前往用户中心的url：防止用户信息还未加载出来，用户就去点击
      userUrl: "javascript:;",
      //移动端抽屉导航
      drawer: false,
      //选中的索引
      activeIndex: '-1'
    }
  },
  //路由观测
  watch: {
    $route: {
      immediate: true,
      handler(route){
        let find = false;
        this.menuList.map((item,index) => {
          if(route.path.indexOf(item.menuUrl) !== -1){
            this.activeIndex = index + '';
            find = true;
          }
          if(item.list){
            item.list.map((items,i) => {
              if(route.path.indexOf(items.menuUrl) !== -1){
                this.activeIndex = index + '-' + i;
                find = true;
              }
            })
          }
        });
        if(!find){
          this.activeIndex = '-1';
        }
      }
    }
  },
  async fetch(){
    await this.$api_classify.getList().then(res => {
      if(res.code === 200){
        this.SET_CLASSIFY(res.data);
      }
    });
    //获取用户信息
    if(this.isLogin){
      await this.$api_login.getInfo().then(res => {
        if(res.code === 200){
          this.SET_USERINFO(res.user);
          this.SET_ROLES(res.roles);
          this.userUrl = "/user/" + res.user.userId;
        }
      });
    }
  },
  methods: {
    ...mapMutations({
      SET_USERINFO: 'user/SET_USERINFO',
      SET_ROLES: 'user/SET_ROLES',
      SET_CLASSIFY: 'SET_CLASSIFY',
      DEL_LOGIN: 'user/DEL_LOGIN',
    }),
    goLink(url){
      this.$router.push(url);
    },
    drawerOpen(){
      document.querySelector("body").style.padding = "0";
    },
    drawerClose(){
      document.querySelector("body").style.removeProperty("padding");
    },
    //退出登录
    logout(){
      this.$api_login.logout().then(res => {
        if(res.code === 200){
          let _this = this;
          this.$message({
            message: res.msg,
            type: "success",
            duration: process.env.MSG_TIME,
            onClose: function () {
              _this.$removeToken();
              _this.$cookies.remove("isLogin");
              _this.DEL_LOGIN();
              _this.$router.push("/login");
            }
          })
        }
      });
    },
  }
}
</script>

<style scoped>
.el-menu .is-active{
  background-color: #ecf5ff;
}
.el-menu.el-menu--horizontal{
  border: none
}
</style>
